import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Button, Menu } from 'antd';
import menuConfig, { MenuItem } from '../../../const/config/menuConfig';
interface myCompoent {
  [key: string]: any
}
const MyMenu: React.FC<myCompoent> = (props) => {
  const [collapsed, setCollapsed] = useState(false);

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
    props.getCollapsed(collapsed)
  };

  const toggleMenu = (item: MenuItem) => {
    console.log(item);
    // Router.push()    
  };

  return (
    <div>
      <Button type="primary" onClick={toggleCollapsed} style={{ margin: 15 }}>
        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </Button>
      <Menu
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        onClick={toggleMenu}
        theme="dark"
        inlineCollapsed={collapsed}
        items={menuConfig}
      />
    </div>
  );
};

export default MyMenu;